<template>
    <div class="mine">
        <div class="top">
            <van-image round :src="user.avatar" />
            <div class="right">
                <span class="name">{{ user.username }}</span>
                <span class="inviter">邀请人：{{ user.invate_code }}</span>
            </div>
        </div>
        <div class="shopNum">

            <span @click="routerTo('OrderPoint')">
                <img src="../../assets/mine_slices/容器.png" alt="">
                金积分：{{ user.hasbill }}
            </span>
            <span @click="routerTo('totalscore')">
                <img src="../../assets/mine_slices/容器(3).png" alt="">
                总积分：{{ user.hasscore }}
            </span>

        </div>
        <div class="myOrder">
            <div class="top">
                <span class="tit">我的订单</span>
                <span class="all" @click="routerTo('orderls', { active_id: 0 })">全部<img
                        src="../../assets/首页_slices/right-row.png" alt=""></span>
            </div>
            <van-grid :border="false" :column-num="3">
                <van-grid-item text="待付款" @click="routerTo('orderls', { active_id: 1 })">
                    <template #icon>
                        <img src="../../assets/mine_slices/Group572.png" alt="">
                    </template>

                </van-grid-item>
                <van-grid-item text="待发货" @click="routerTo('orderls', { active_id: 2 })">
                    <template #icon>
                        <img src="../../assets/mine_slices/Group573.png" alt="">
                    </template>
                </van-grid-item>
                <van-grid-item text=" 待收货" @click="routerTo('orderls', { active_id: 3 })">
                    <template #icon>
                        <img src="../../assets/mine_slices/Group574.png" alt="">
                    </template>

                </van-grid-item>
                <!-- <van-grid-item text=" 待评价" @click="routerTo('orderls', { active_id: 4 })">
                    <template #icon>
                        <img src="../../assets/mine_slices/Group575.png" alt="">
                    </template>
                </van-grid-item> -->
            </van-grid>
        </div>
        <div class="btm">
            <div class="tit">我的服务</div>
            <van-grid :border="false">

                <van-grid-item text="静态钱包" @click="routerTo('StaticWallet')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器(2).png" alt="">
                    </template>

                </van-grid-item>
                <van-grid-item text="动态钱包" @click="routerTo('DynamicWallet')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器(5).png" alt="">
                    </template>

                </van-grid-item>
                <van-grid-item text="储存钱包" @click="routerTo('storageWallet')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器(6).png" alt="">
                    </template>
                </van-grid-item>
                <van-grid-item text="商城钱包 " @click="routerTo('MallWallet')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器(1).png" alt="">
                    </template>
                </van-grid-item>

            </van-grid>
            <van-grid :border="false">
                <van-grid-item text="我的邀请" @click="routerTo('myteam/index')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器(4).png" alt="">
                    </template>

                </van-grid-item>

                <van-grid-item text="意见反馈" @click="routerTo('feedback')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器15.png" alt="">
                    </template>

                </van-grid-item>
                <van-grid-item text="我的收藏">
                    <template #icon>
                        <img src="../../assets/mine_slices/组2201.png" alt="">
                    </template>

                </van-grid-item>
                <van-grid-item text="收货地址" @click="routerTo('addressls')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器7.png" alt="">
                    </template>
                </van-grid-item>
            </van-grid>
            <van-grid :border="false">
                <van-grid-item text="客服热线" @click="onclickSever">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器10.png" alt="">
                    </template>

                </van-grid-item>
                <van-grid-item text="平台介绍" @click="routerTo('platformIntroduction')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器13.png" alt="">
                    </template>

                </van-grid-item>
                <van-grid-item text="设置" @click="routerTo('myset')">
                    <template #icon>
                        <img src="../../assets/mine_slices/容器16.png" alt="">
                    </template>
                </van-grid-item>
                <van-grid-item text="签到" @click="signIn">
                    <template #icon>
                        <img src="../../assets/mine_slices/qiandaox(1).png" alt="">
                    </template>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<script lang="ts">
// import { useStore } from 'vuex';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { userInfo, getSigning } from '../../api/index';
import { Toast, Dialog } from 'vant';
export default {
    setup() {
        let formData = new FormData();
        const router = useRouter();
        const user: any = ref("")


        const onclickSever = () => {
            Dialog.alert({
                title: '客服热线',
                message: '咨询电话:4000-955-988',
                theme: 'round-button',
            }).then(() => {
                // on close
            });
        }
        const routerTo = (str: string, data?: any) => {
            const path = `/mine/${str.toLowerCase()}`;

            if (data) {
                // console.log("发送数据:", data)
                router.push({ path: path, state: data });
            } else {
                router.push(path);
            }
        }

        //  签到
        const signIn = () => {
            let formData = new FormData()
            getSigning(formData).then((res: any) => {
                console.log(res);
                if (res.code == 0) {
                    Toast(res.msg)
                } else {
                    Toast(res.msg)
                }
            })
        }

        // const routerTo = (str: string) => router.push({
        //     path: '/mine/mallWallet'
        // }).catch(err => {
        //     console.error(err);
        // });
        // const routerTo = (str: string) => router.push({ name: str.toLowerCase() });

        onMounted(() => {
            userInfo(formData).then(res => {
                if (res.code == 1) {
                    window.localStorage.setItem("userInfo", JSON.stringify(res.data));
                    // store.commit('setUserInfo', res.data)
                    user.value = res.data
                } else {
                    Toast(res.msg)
                    window.localStorage.removeItem("userInfo");
                    window.localStorage.removeItem("accessToken");
                    router.push({
                        path: '/login'
                    })
                }
            })
            formData = new FormData();
        })

        return { routerTo, user, onclickSever, signIn };
    },
}
</script>

<style lang="less" scoped>
.mine {
    width: calc(100vw-30px);
    padding: 66px 15px 55px;
    background-image: url(../../assets/mine_slices/mineBkg.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 250px;
    background-color: #F8F9FC;
    min-height: 300px;
    height: calc(100vh - 170px);

    .top {
        margin-top: 4px;
        display: flex;
        justify-content: flex-start;

        .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: left;
            margin-left: 12px;
            padding: 5px 0;

            .name {
                font-size: 16px;
                color: #FFFFFF;
            }

            .inviter {
                font-size: 14px;
                color: #FFFFFF;
            }
        }

        .van-image {
            width: 68px;
            height: 68px;
            border: 1px solid #FFFFFF;
        }
    }

    .shopNum {
        width: 345px;
        height: 48px;
        margin-top: 14px;
        background: #FFFFFF;
        border-radius: 10px 10px 10px 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        img {
            margin-top: 5px;
            width: 14px;
            height: 14px;
        }

        font-size: 16px;
        color: #3D3D3D;
    }

    .myOrder {
        margin-top: 13px;
        width: 345px;
        height: 119px;
        background: #FFFFFF;
        border-radius: 12px 12px 12px 12px;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        padding: 10px 20px 0;
        box-sizing: border-box;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .all {
                font-size: 12px;
                color: #999999;

                img {
                    width: 3px;
                    height: 6px;
                    margin-left: 9px;
                    margin-bottom: 1px;
                }
            }

        }

        .btm {
            display: flex;
            justify-content: space-between;
        }
    }

    .btm {
        height: 230px;
        margin-top: 20px;
        background: #FFFFFF;
        border-radius: 12px 12px 12px 12px;
        padding: 17px;

    }

    .tit {
        font-size: 18px;
        color: #3D3D3D;
        text-align: left;
    }

    img {
        width: 22px;
        height: 22px;
    }
}
</style>